<template>
  <swiper
    class='h-swiper-wrap'
    :indicator-color='indicatorColor'
    :indicator-active-color='indicatorActiveColor'
    mode="aspectFill"
    :vertical="vertical"
    :circular="circular"
    :indicator-dots="indicatorDots"
    :autoplay="autoplay"
    indicatorActiveColor="#d5ad57"
    indicatorColor="#fff"
  >
    <swiper-item v-if="imgSrcs.length > 0" class="h-swiper-item" v-for="(data, index) in imgSrcs" :key="index">
      <image class="h-swiper-img" :src="data"/>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  name: "hSwiper",
  props: {
    vertical: {
      type: Boolean,
      default: false
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    indicatorActiveColor: {
      type: String,
      default: '#333'
    },
    indicatorColor: {
      type: String,
      default: '#999'
    },
    circular: {
      type: Boolean,
      default: true
    },
    indicatorDots: {
      type: Boolean,
      default: true
    },
    imgSrcs: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style>
.h-swiper-wrap {
  width: 100%;
  height: 400rpx;
  position: relative;
}
.h-swiper-item {
  width: 100%;
  height: 100%;
}
.h-swiper-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
